<template>
  <div class="pane-login">
    <ul class="colorTop">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

    <div class="loginInfo">
      <div class="title">
        <h1>欢迎登录系统</h1>
        <p>开始你的预约吧！高效优雅从现在开始！</p>
      </div>

      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="loginFormRef"
        label-position="top"
        label-width="100px"
        hide-required-asterisk
        class="demo-ruleForm"
      >
        <el-form-item label="Username" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="Password" prop="pass">
          <el-input v-model="ruleForm.pass" show-password placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item>
          <div
            class="controls"
            style="display: flex; justify-content: space-between; align-items: center; width: 100%"
          >
            <el-checkbox v-model="keepPwd">记住密码</el-checkbox>
            <el-link type="primary">忘记密码</el-link>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitFormLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="switch iconfont icon-qiehuan" @click="switchPage"></div>
    <p class="remind">没有账号？点此切换注册页面！</p>
  </div>
</template>

<script setup lang="ts">
import { CACHE_ACCOUNT, CACHE_KEEPPWD, CACHE_PASSWORD } from "@/global/constants"
import useRouterJump from "@/hooks/useRouterJump"
import useValidator from "@/hooks/useValidator"
import useLoginStore from "@/store/login/login"
import { localCache } from "@/utils/cacheData"
import { messageReminder } from "@/utils/notificationHint"
import type { FormInstance } from "element-plus"
import { reactive, ref } from "vue"

const keepPwd = ref<boolean>(localCache.getCache(CACHE_KEEPPWD) ?? false)
const localName = localCache.getCache(CACHE_ACCOUNT)
const localPass = localCache.getCache(CACHE_PASSWORD)

const ruleForm = reactive({
  name: localName ?? "",
  pass: localPass ?? ""
})

// 引验证的hook函数
const { rules } = useValidator(ruleForm)

// 引用路由跳转的hook函数
const { routerJump } = useRouterJump()

const loginStore = useLoginStore()

const loginFormRef = ref<FormInstance>()
// 登录的提交
function submitFormLogin() {
  loginFormRef.value?.validate(async (valid) => {
    if (valid) {
      // 全部表单验证成功，在向服务器发请求，进行注册
      // const { name, pass } = this.ruleForm;
      const { name, pass } = ruleForm
      loginStore
        .loginAction({ account: name, password: pass }, keepPwd.value)
        .then(() => {
          messageReminder({ message: "登录成功！开始预约管理吧！", type: "success" })
          routerJump("back")
        })
        .catch((err) => {
          messageReminder({ message: `登录失败！${err}`, type: "error" })
        })
    } else {
      // alert("请仔细校对输入的信息！")
      messageReminder({ message: "提交失败！请仔细校对输入的信息！", type: "warning" })
      return false
    }
  })
}

// 缓存记录一下是否保存密码  --> 也可以将逻辑写到store里面
// watch(
//   keepPwd,
//   (newValue) => {
//     console.log(CACHE_KEEPPWD, newValue)
//     localCache.setCache(CACHE_KEEPPWD, newValue)
//   },
//   {
//     immediate: true // 立即监听一次
//   }
// )

const emit = defineEmits(["handleSwitchPage"])
function switchPage() {
  emit("handleSwitchPage", "paneLogin")
}
</script>

<style lang="less" scoped>
.pane-login,
.register {
  // /* 开启3d */
  // perspective: 1000px;
  // transform-style: preserve-3d;
  // /* 3D模式下隐藏旋转元素的背面 */
  // backface-visibility: hidden;
  // /* 临时 */
  // /* transform: rotateY(60deg); */
  // transition: transform 0.7s ease-in-out;
  .colorTop {
    li {
      height: 8px;
      width: 20%;
      float: left;
      background-color: red;
      &:nth-child(1) {
        background-color: #d1d1d1;
      }
      &:nth-child(2) {
        background-color: #b4b4b5;
      }
      &:nth-child(3) {
        background-color: #9e9e9f;
      }
      &:nth-child(4) {
        background-color: #848484;
      }
      &:nth-child(5) {
        background-color: #515155;
      }
    }
  }

  .loginInfo,
  .registerInfo {
    width: 80%;
    height: 86%;
    // background-color: #999;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    /* 形成文字与背景分离 */
    // transform: translateZ(60px);

    .logo {
      cursor: pointer;
      display: flex;
      width: 100%;
      // width: 160px;
      height: 65px;
      background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgb(0, 0, 0, 1));
      border-radius: 80px;
      box-shadow: 6px 8px 5px #888;
      img {
        margin: auto;

        width: 145px;
        height: 50px;
      }

      transition: transform 0.75s;
      &:hover {
        transform: scale(1.1);
      }
    }

    .title {
      margin-top: 30px;
      text-align: center;
      h1 {
        font-size: 34px;
        font-weight: 500;
        letter-spacing: 2px;
      }
      p {
        margin-top: 10px;
        color: #82858d;
        letter-spacing: 0.0078rem;
      }
    }

    .el-form {
      width: 80%;
      margin: 30px auto 0;

      .el-button {
        width: 100%;
        height: 50px;
        margin-top: 10px;
        border-radius: 5px;
        background-color: #0072bb;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 5px;
      }
    }
    :deep(.el-form--label-top .el-form-item__label) {
      font-size: 17px;
      font-weight: 600;
      color: black;
    }

    :deep(.el-input__inner) {
      height: 50px;
      line-height: 50px;
      border-radius: 5px;
    }
  }

  .switch {
    cursor: pointer;
    margin: 10px;
    border-radius: 50%;
    position: absolute;
    bottom: 3%;
    right: 4%;
    font-size: 30px;
    color: #888;
    transition: all 0.75s;
    &:hover {
      color: #515155;
      transform: scale(1.2);
    }
  }

  .remind {
    position: absolute;
    bottom: 2%;
    right: 4%;
    font-size: 12px;
    font-weight: 300;
    color: #999;
  }
}
</style>
